<template>
  <view class="fond">
    <view class="modelCard" style="padding-right: 40%;">
      <text style="flex: 1;">前倾</text>
      <view style='width: 15px; height: 100%; background-color: rgba(52, 152, 219, 1);'></view>
    </view>
    <view class="modelCard" style="padding-right: 40%;">
      <text style="flex: 1;">摆臂</text>
      <view style='width: 40%; height: 100%; background-color: rgba(52, 152, 219, 1);'></view>
    </view>
    <view class="modelCard" style="padding-right: 40%;">
      <text style="flex: 1;">跺脚</text>
      <view style='width: 15px; height: 100%; background-color: rgba(52, 152, 219, 1);'></view>
    </view>
    <view class="modelCard">
      <text style="width: 60%;">屈膝</text>
      <view style='width: 60px; height: 100%; background-color: rgba(255, 87, 51, 1);'></view>
    </view>
    <view class="modelCard">
      <text style="width: 60%;">步频</text>
      <view style='width: 30px; height: 100%; background-color: rgba(255, 87, 51, 1);'></view>
    </view>
  </view>
</template>

<script lang='ts'>
</script>

<style>
.model {
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
}

.modelCard {
  display: flex;
  align-items: center;
  height: 42px;
  font-size: 15px;
  color: black;
  margin-bottom: 4px;
}
</style>
